<template>
  <div id="app">
    <v-header :seller="seller"></v-header>
    <div class="tab">
      <div class="tab-item">
        <router-link  to="/goods">商品</router-link>
        </div>
      <div class="tab-item">
        <router-link  to="/ratings">评价</router-link>
      </div>
      <div class="tab-item">
        <router-link  to="/sellers">商家</router-link> 
      </div>
    </div>
    <router-view :seller="seller"></router-view>
  </div>
</template>
<script>
import header from './components/header/header.vue'
const ERR_OK = 0;
export default {
  data() {
    return {
      seller: {}
    }
  },
  created(){
    this.$http.get('https://easy-mock.com/mock/5a840ba0ca58457ccde2aa13/example/').then((response)=>{
      let data= response.body
      if(data.errNum === ERR_OK){
        this.seller = data.seller
      }
    })
  },
  components: {
    'v-header' : header,
  }
};
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.tab{
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
  /* border: 1px solid rgba(7,17,27,.1) */
  /* 实现1像素border */
  position: relative;
}
.tab:after{
  position: absolute;
  display: block;
  content: '';
  left: 0;
  bottom: 0;
  border-top:1px solid rgba(7,17,27,0.1);
  width: 100%; 
}
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
   .tab:after{
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
    }
}

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .tab:after{
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    }
}
.tab .tab-item{
  flex: 1;
}
.tab .tab-item a{
  display: block;
  font-size:14px;
  color: rgb(77, 85, 93)
}
.tab .tab-item .router-link-active{
  color: rgb(240, 20, 20);
}
</style>
